<template>
  <div>
    <van-nav-bar left-arrow>
        <template #left>
            <van-icon name="arrow-left" @click="$router.back()" />
        </template>
    </van-nav-bar>
    <h3><img src="@/assets/show5.png" alt=""></h3>
    <h4>请选择你遇到的问题</h4>
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in list"
          clickable
          :key="item"
          :title="`${item}`"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox :name="item" ref="checkboxes" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-row>随意拨打占用线路，平台将暂停为您提供叫车服务</van-row>
    <button>拨打安全专线</button>
  </div>
</template>

<script>

export default {
   data() {
    return {
      list: [
        '遇到交通事故', 
        '联系不上乘客的亲友',
        '遭遇性骚扰或者性侵',
        '与他人发生肢体冲突',
        '被限制人身自由',
        '遭遇其他人身伤害'
      ],
      result: [],
    };
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
  },
}
</script>

<style lang="scss" scoped>
div{
  margin: 5px;
}
img{
    width: 100%;
}
h4{
  height: 35px;
  line-height: 45px;
  padding: 5px 0 5px 20px;
}
.van-row{
  color: orangered;
  font-size: 12px;
  margin: 10px 0 5px;
  text-align: center;
}
button{
  width: 100%;
  height: 45px;
  border: none;
  color: white;
  background-color:lightblue ;
  margin: 20px 0;
}
</style>